import {
    UserOutlined,
    BookOutlined,
    RedditOutlined,
    PlusOutlined,
    UserAddOutlined,
    AlignLeftOutlined
  } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu,Col,Row,Button } from 'antd';
import React, { useState,useCallback,useMemo } from 'react';
const { Header, Content, Footer, Sider } = Layout;
import {useNavigate,Routes ,Route,Navigate} from "react-router-dom"

import {connect} from 'react-redux'
import { withLogin} from '../utils/hoc';

import BooksChange from './Books/BooksChange'
import Booksadd from './Books/Booksadd'
import Bookslist from './Books/Bookslist'
import Managerlist from './Manager/Managerlist'
import Manageradd from './Manager/Manageradd'
import ManagerChange from './Manager/ManagerChange'
import Userlist from './User/Userlist'
import Useradd from './User/Useradd'
import UserChange from './User/UserChange'



function Manage(props){
    
    function getItem(label, key, icon, children) {
      return {
        key,
        icon,
        children,
        label,
      };
    }
      const items = useMemo(()=>{
          return(
              [
                  getItem('小说管理', '/book', <BookOutlined />, [
                    getItem('小说列表', '/book_list',<AlignLeftOutlined />),
                    getItem('添加小说', '/book_add',<PlusOutlined />),
                  ]),
                  getItem('用户管理', '/user', <UserOutlined />, [
                    getItem('用户列表', '/user_list',<AlignLeftOutlined />),
                    getItem('添加用户', '/user_add',<UserAddOutlined />),
                  ]),
                  getItem('管理者', '/manager', <RedditOutlined />, [
                    getItem('管理者列表', '/manager_list',<AlignLeftOutlined />),
                    getItem('添加管理者', '/manager_add',<UserAddOutlined />),
                  ]),
                ]
          )
      })
    const baseUrl = '/manage'
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate()

    const change =useCallback(({ key })=>{
        const path = baseUrl +key;
        navigate(path)
    },[])

    const logout = useCallback(function(){
        props.logout()
        navigate('/login')
    },[])
    
    return(
        <>
            <Layout
            style={{
                minHeight: '100vh',
            }}
            >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="logo" />
                <Menu 
                    theme="dark" 
                    defaultOpenKeys={['/book_list']}
                    mode="inline" 
                    items={items} 
                    onClick={change}
                />
            </Sider>
            <Layout className="site-layout">
                <Header 
                className="site-layout-background"
                style={{
                    padding: 0,
                }}>
                    <Row gutter={16} style={{margin:0}}>
                    <Col span={21}>
                        <h2>趣学藏书阁管理系统</h2>
                    </Col>
                    <Col span={3} className='text-right'>
                        <span>您好！{props.user.manager}</span> <Button type="link" onClick={logout}>退出</Button>
                    </Col>
                </Row>
                </Header>
                <Content
                style={{
                    margin: '0 16px',
                }}
                >
                <Breadcrumb
                    style={{
                    margin: '16px 0',
                    }}
                >
                </Breadcrumb>
                <div
                    className="site-layout-background content"
                    style={{
                    padding: 24,
                    minHeight: 550,
                    }}
                >
                    <Routes>
                            <Route path='book_list' element={<Bookslist />} />
                            <Route path='book_add' element={<Booksadd />} />
                            <Route path='book_change/:id' element={<BooksChange />} />  
                            <Route path='user_list' element={<Userlist />} />
                            <Route path='user_add' element={<Useradd />} />
                            <Route path='user_change/:id' element={<UserChange />} />
                            <Route path='manager_list' element={<Managerlist />} />
                            <Route path='manager_add' element={<Manageradd />} />
                            <Route path='manager_change/:id' element={<ManagerChange />} />

                            <Route path='/' element={<Navigate to='/manage/book_list' />} />
                    </Routes>
                </div>
                </Content>
                <Footer
                style={{
                    textAlign: 'center',
                }}
                >
                Ant Design ©2018 Created by Ant UED
                </Footer>
            </Layout>
            </Layout>
        </>
    )
}

Manage = withLogin(Manage)

const mapStateToProps = function(state){
    return {
        user:state.userInfo
    }
}

const mapDispatchToProps = function(dispatch){
    return {
        logout(){
            dispatch({type:'logout'})
        }
    }
}
Manage = connect(mapStateToProps,mapDispatchToProps)(Manage)

export default Manage;